<template>
  <div class="shop-goods">
    <div class="menu-wrapper">
      <ul>
        <li
          class="menu-item"
          :class="{ current: currentIndex === index }"
          v-for="(good, index) in goods"
          :key="index"
          @click="clickMenuItem(index)"
        >
          <span>
            <img v-if="good.icon" :src="good.icon" alt="" />
            {{ good.name }}
          </span>
        </li>
      </ul>
    </div>

    <div class="foods-wrapper">
      <!-- 分类列表,里面每一个li对应左侧列表的一项,如优惠,折扣 -->
      <ul class="categories-list">
        <li class="one-category" v-for="(good, index) in goods" :key="index">
          <h2 class="category-title">{{ good.name }}</h2>
          <!-- 每一个分类中详细的食物列表 -->
          <ul class="food-of-category">
            <li
              class="food-item"
              @click="FnShowCoverFoodDetail(food)"
              v-for="(food, index) in good.foods"
              :key="index"
            >
              <img :src="food.icon" alt="" />
              <div class="right-part">
                <h3 class="name">{{ food.name }}</h3>
                <p class="description">{{ food.description || "&nbsp;" }}</p>
                <div class="food-data">
                  <span>月售 {{ food.sellCount }} 份</span>
                  <span>好评率 {{ food.rating }}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{ food.price }}</span>
                  <span class="old" v-if="food.oldPrice">￥{{ food.oldPrice }}</span>
                </div>

                <!-- 向购物查添加/减少食物的组件 外面的wrapper用于调整位置 -->
                <div class="cart-control-wrapper" @click.stop="">
                  <CartControl :food="food"></CartControl>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- 某一个食物的详情 -->
    <CoverFoodDetail
      v-if="showCoverFoodDetail"
      @closeCoverFoodDetail="closeCoverFoodDetail"
      :food="foodTobeShown"
    ></CoverFoodDetail>

    <!-- 购物车组件 -->
    <BottomCart></BottomCart>
  </div>
</template>

<script>
import CartControl from "../../../components/CartControl/CartControl"
import CoverFoodDetail from "../../../components/CompsOfShop/CoverFoodDetail"
import BottomCart from "../../../components/CompsOfShop/BottomCart"
import { mapState } from "vuex"

import BetterScroll from "better-scroll"

export default {
  data() {
    return {
      //是否显示视频详细信息遮罩层
      showCoverFoodDetail: false,
      //食物列表当前滚动的y坐标
      scrollY: 0,
      //食物列表中每一个大项的头部坐标
      coordinatesY: [],
      //被点击的food(需要展示该food详情)
      foodTobeShown: {},
    }
  },
  computed: {
    ...mapState(["goods"]),
    currentIndex() {
      return this.coordinatesY.findIndex((coordinate, index) => {
        return coordinate <= this.scrollY && this.scrollY < this.coordinatesY[index + 1]
      })
    },
  },
  methods: {
    //创建betterscroll实例
    _initBS() {
      this._initCoordinatesY()

      // 创建两个列表的BetterScroll对象
      let bsMenu = new BetterScroll(".menu-wrapper", {
        bounceTime: 400,
        //让Better-scroll不再阻止原生dom的click事件
        click: true,
        disableMouse: false,
        disableTouch: false,
      })
      console.log(111)
      // bsFoods要在别的函数里使用, 所以把它交给this保存, 以便跨作用域
      this.bsFoods = new BetterScroll(".foods-wrapper", {
        bounceTime: 400,
        click: true,
        disableMouse: false,
        disableTouch: false,
        // 设置 probeType: 3之后,任何时候都会触发scroll事件. 用于处理惯性滑动
        probeType: 3,
      })
      // 给bsFoods绑定滚动时触发的回调
      this.bsFoods.on("scroll", ({ x, y }) => {
        this.scrollY = Math.abs(y)
      })
    },
    // 计算出食品列表中每一个大项的头部坐标
    _initCoordinatesY() {
      // 高度累加器
      let height = 0
      this.coordinatesY.push(height)
      // 获得所有需要计算坐标的li
      let lis = document.querySelectorAll(".one-category")
      //伪数组转换为真数组
      lis = [...lis]
      lis.forEach((li) => {
        height += li.scrollHeight
        this.coordinatesY.push(height)
      })
    },
    // 当左侧菜单中的某一项被点击时, 将右侧食品列表调整到相应位置
    clickMenuItem(index) {
      // 得到目标位置
      let y = this.coordinatesY[index]
      this.bsFoods.scrollTo(0, -y, 300)
      this.scrollY = y
    },
    // 显示食品详情遮罩层,同时把被点击的食物保存在变量foodTobeShown中,然后传递给食品详情遮罩层组件
    FnShowCoverFoodDetail(food) {
      this.showCoverFoodDetail = true
      this.foodTobeShown = food
    },
    closeCoverFoodDetail() {
      this.showCoverFoodDetail = false
    },
  },
  mounted() {
    this.$store.dispatch("getShopGoods", () => {
      this.$nextTick(() => {
        this._initBS()
      })
    })
  },
  components: {
    CartControl,
    CoverFoodDetail,
    BottomCart,
  },
}
</script>

<style lang="less" scoped>
@import "../../../common/style/mixin.less";
.shop-goods {
  display: flex;

  // 这里设置top和bottom的定位, 是为了元素的height能根据不同屏幕自动调整
  // 最终目的是为了获得Height值, 只有有了height值后, overflow: hidden 才有意义, 才能结合better-scroll
  position: absolute;
  top: 19.5rem;
  bottom: 4.8rem;
  width: 100vw;
  overflow: hidden;
  .menu-wrapper {
    width: 8rem;
    li {
      width: 100%;
      height: 5.4rem;
      padding: 0 1.2rem;
      line-height: 5.2rem;
      background-color: #f3f5f7;
      &.current {
        background-color: #ffffff;
      }
      .bottom-border-1px(#dbdee1);
      &::after {
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
      }
      img {
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.2rem;
      }

      span {
        font-size: 1.2rem;
      }
    }
  }
  .foods-wrapper {
    flex: 1;
    .category-title {
      padding-left: 1.4rem;
      height: 2.6rem;
      line-height: 2.6rem;
      margin: 0;
      border-left: 0.2rem solid #d9dde1;
      font-size: 1.2rem;
      font-weight: normal;
      color: #93999f;
      background: #f3f5f7;
    }
    .food-item {
      position: relative;
      display: flex;
      background-color: #fff;
      padding: 1.8rem 1.8rem 1.4rem 1.8rem;
      .bottom-border-1px(#e6e7e8);
      &::after {
        width: 95%;
        left: 50%;
        transform: translateX(-50%);
      }
      img {
        width: 5.7rem;
        height: 5.7rem;
      }
      .right-part {
        position: relative;
        flex: 1;
        margin-left: 1rem;
        .name {
          margin: 0.2rem 0 0.8rem 0;
          height: 1.4rem;
          line-height: 1.4rem;
          font-size: 1.4rem;
          font-weight: normal;
          color: #07111b;
        }
        .description {
          font-size: 1rem;
          line-height: 1rem;
          color: #93999f;
          margin-bottom: 0.8rem;
        }
        .food-data {
          line-height: 1rem;
          span {
            margin-right: 1.5rem;
            font-size: 1rem;
            color: #93999f;
          }
        }
        .price {
          margin-top: 0.5rem;
          line-height: 2.4rem;
          .now {
            margin-right: 0.8rem;
            font-size: 1.4rem;
            color: #f01414;
          }
          .old {
            font-size: 1.2rem;
            color: #666;
            text-decoration: line-through;
          }
        }
      }
      .cart-control-wrapper {
        position: absolute;
        right: -0.5rem;
        bottom: -0.5rem;
      }
    }
  }
}
</style>
